<template>
  <div class="My-box">
    <div class="My-content">
      <!-- 我的顶部 -->
      <van-nav-bar
        title="个人中心"
        left-text="返回"
        left-arrow
        @click-left="GoBack"
      >
        <template #right>
          <van-icon name="setting-o" size="18" @click="getSetting" />
        </template>
      </van-nav-bar>
      <!-- 我的内容 -->
      <div class="My-image">
        <h1>
          <img src="" />
        </h1>
        <span id="describe" @click="GoJump">{{msg}}</span>
      </div>
      <!-- 九宫格 -->
      <van-grid>
        <van-grid-item icon="after-sale" text="付款" />
        <van-grid-item icon="logistics" text="待收货" />
        <van-grid-item icon="newspaper-o" text="待评价" />
        <van-grid-item icon="label" text="全部订单" />
      </van-grid>
      <!-- 功能条 -->
      <van-cell-group>
        <van-cell title="地址管理" is-link to="index" />
        <van-cell title="我的收藏" is-link to="index" />
        <van-cell title="升级" is-link to="index" />
        <van-cell title="联系我们" is-link to="index" />
        <van-cell title="关于我们" is-link to="index" />
      </van-cell-group>
      <!-- 测试盒子 -->
    </div>
    <!-- 底部 -->
    <FooterBarVue></FooterBarVue>
  </div>
</template>

<script>
import FooterBarVue from "@/components/FooterBar.vue";
export default {
  name: "My",
  components: {
    FooterBarVue,
  },
  data() {
    return {
      showList:"",
      show: false,
      msg:'请点击登录'
    };
  },
  created(){
    let token = localStorage.getItem("token");
    if (token) {
      this.msg = "你好"
      let userid = localStorage.getItem("userid"); 
      this.service({
        url: "/user/info",
        headers: {token},
        params: {
          userid:userid 
        }
      })
      .then((res)=>{
        console.log(res.data.data[0].tel);
        this.msg = "您好！" + res.data.data[0].tel
      })
    }
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    GoBack() {
      this.$router.go(-1);
    },
    /* 点击右上角 */
    getSetting(){
      this.$router.push("/Setting");
    },
    /* 点击用户名 */
    GoJump(){
      let token = localStorage.getItem("token");
      if (token) {
        this.$router.push("/");
      }
      else {
        this.$router.push("/Login")
      }
    },
    /* 测试 */
    addage(){
      /* 提交mutation函数  2 是提交mutation时传的参数 */
      /* this.$store.commit({
        type:"mAgeadd",
        inc:1
      }) */
      /* 方法二 */
      /* this.$store.commit("mAgeadd",1) */
      this.$store.dispatch(ageAdd)
    },
    addcount(){
      /* 方法yi */
      this.$store.commit("mCountadd",{
        inc:1,
        incs:2
      });
    }
  },
};
</script>

<style scoped>
@import url(../assets/font_3533054_zv2h74i7m7/iconfont.css);
.My-box {
  /* width: 100%; */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.My-content {
  flex: 1;
  overflow: auto;
}
.My-image {
  width: 100%;
  height: 8rem;
  /* background-color: pink; */
  background: url(https://img2.baidu.com/it/u=1351344771,2228825368&fm=253&fmt=auto&app=138&f=JPEG?w=991&h=336)
    no-repeat;
  background-size: 100%;
  display: flex;
}
.My-image h1 {
  width: 4.125rem;
  height: 4.125rem;
  background-color: red;
  border-radius: 50%;
  align-items: center;
  margin-left: 0.9375rem;
  margin-top: 1.9375rem;
  background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F14047224542%2F1000&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667568814&t=182d6b629f712bb9c67c62f57b655c11)
    no-repeat;
  background-size: 100%;
}
.My-image span {
  line-height: 8rem;
  margin-left: 1.25rem;
  font-size: 1.25rem;
  color: white;
}
</style>